<template>
  <div class="home-container">
    <el-container class="home-container">
      <el-header class="header-container">
        <i class="el-icon-platform-eleme" style="color: #fff;font-size: 32px;padding: 0 20px"></i>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
             background-color="#1758AF" text-color="#fff" active-text-color="#ffd04b"
        router>
          <el-menu-item index="/home/query">材料查询</el-menu-item>
          <el-menu-item index="/home/config">系统设置</el-menu-item>
        </el-menu>
        <div class="search-container">
          <el-input clearable placeholder="请搜索" v-model.trim="content"
                    @clear="handleClear"
                    @keyup.enter.native="handleSearch"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="copyright-container"><p>©2019 Terry 版本v1.0</p></div>
      </el-header>
      <el-main>
        <div class="main-container">
          <keep-alive>
            <router-view ></router-view>
          </keep-alive>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      activeIndex: '/home/query',
      content: ''
    }
  },
  methods: {
    handleSearch () {
        this.$store.commit('setSearchContent', this.content)
    },
    handleClear () {
      this.$store.commit('setSearchContent', '')
    }
  },
  computed: {
    ...mapState(['searchContent'])
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
  .home-container {
    height 100%
    width 100%
    background-color #f0f8ff
  }
  .el-main {
    background-color aliceblue
    color #333
    text-align center
    height 100%
  }
  .el-header {
    padding 0
  }
  .header-container {
    display flex
    align-items center
    background-color #1758AF
  }
  .search-container {
    width 40%
    padding-left 30px
  }
  .main-container {
  }
  .table-container {
    padding 0 60px
  }
  .copyright-container {
    color #fff
    margin 0 auto
  }
</style>
